<template>
  <view class="social-circle">
    <CustomHeader :fontWeight="'normal'" :showReturn="false" :title="'习惯百日行'" />
    <scroll-view 
      v-if="dataList.length"
      class="scroll-view"
      :class="{ 'scroll-view-in-scroll': scrollTop }"
      :scroll-y="true"
      :lower-threshold="100"
      :refresher-enabled="true"
      refresher-default-style="none"
      refresher-background="none"
      :scroll-anchoring="true"
      :refresher-triggered="refresherTriggered"
      @scrollToLower="scrollToLowerList"
      @refresherRefresh="refresherRefresh"
      @scroll="scroll"
    >
      <view v-show="refresherTriggered" class="loading">
            下拉刷新中...
      </view>
      <view class="social-circle__clock-content">
        <BorderBox v-for="(item, index) in dataList" :key="index" :inside-padding="18" :bg-color="'#FFFBEA'" :bd-color="'#CB9064'" class="social-circle__clock-content--item">
          <view>
            <ClockItem :hasGiveLikeHandle="true" :show-teacher-comment="true" :audio-index="'clock-detail' + index"  :item="item" @giveLikeHandle="refreshData" @openActionSheet="openActionSheet"  @generateClockPoster="generateClockPoster" />
          </view>
        </BorderBox>
      </view>
      <view class="bolck" />
    </scroll-view>
    <view v-else class="empty-page">
      <view
        class="today-empty"
        :style="{ 'background-image': `url(${today_empty})` }"
      >
        还没有同学来参加哦，快去争当第一人吧
      </view>
      <view
        class="today-empty-btn"
        :style="{ 'background-image': `url(${today_btn2})` }"
        @tap="toIndex"
      >
        去看看
      </view>
    </view>
    <GenerateImage 
      :show.sync="showShare"
      :student-id="clockSignInfo.studentId"
      :mine-id="clockSignInfo.mineId"
      :uuid="clockSignInfo.uuid"
      :theme-id="clockSignInfo.themeId"
    />
  </view>
</template>

<script>
import './index.scss'
import Taro from "@tarojs/taro";
import CustomHeader from "_c/custom-header/index.vue"
import ClockItem from "@/components/clock-item/index.vue";
import BorderBox from "_c/border-box/index";
import GenerateImage from "@/components/generate-image/index";
import { circleList } from '_api/social-circle'
import {
  today_btn2,
  today_empty
} from "@/libs/image-url";
/* 每页最大条数 */
const ONE_PAGE_MAX_LENGTH = 20
export default {
  data () {
    return {
      today_btn2,
      today_empty,
      dataList: [],
      scrollTop: 0,
      pagination: {
        page: 1
      },
      /* 滚动距离 */
      /* 列表加载完毕 */
      isListEnd: false,
      /* 下拉刷新触发中 */
      refresherTriggered: false,
      /* 打卡日签 */
      showShare: false,
      clockSignInfo: {}
    };
  },
  components: {
    CustomHeader,
    ClockItem,
    BorderBox,
    GenerateImage
  },
  onLoad () {
    this.getList()
  },
  onShow () {
    if (Taro.getStorageSync('refreshCircle')) {
      this.pagination.page = 1;
      this.dataList = []
      this.getList()
    }
  },
  methods: {
    toIndex () {
      Taro.switchTab({
        url: "/pages/index/index"
      })
    },
    /* 生成打卡海报 */
    generateClockPoster (item) {
      this.showShare = true
      this.clockSignInfo = {
        studentId: item.student_base_info.id,
        uuid: item.student_clock_info.uuid,
        themeId: item.student_clock_info.theme_id,
        mineId: item.student_clock_info.mine_id
      }
    },
    scroll ({ detail: { scrollTop } }) {
       this.scrollTop = scrollTop < 50 ? 0 : scrollTop
        console.log(scrollTop,'scrollTop')
    },
    scrollToLowerList () {
      console.log("onReachBottom")
      if (this.isListEnd) return;
      this.pagination.page ++
      this.getList()
      
    },
    refresherRefresh () {
      this.refresherTriggered = true
      console.log("111")
      this.pagination.page = 1
      this.getList()
      
    },
    refreshData () {},
    openActionSheet () {},

    /* 获取圈子列表 */
    async getList () {
      const data = await circleList({ ...this.pagination })
      console.log(data,'data')
      if (!data) return
      const { data: { data: list, meta: { pagination: { count, current_page, total_pages } } } } = data
      this.isListEnd = (count < ONE_PAGE_MAX_LENGTH) || (current_page === total_pages)
      this.pagination.page === 1 ? (this.dataList = list) : this.dataList.push(...list) 
      Taro.setStorageSync('refreshCircle', '')
      this.refresherTriggered = false
      console.log(this.dataList,'dataList')
    }
  }
}

</script>
<style lang='scss' scoped>
</style>